import { memo } from 'react';
import { Image } from 'antd-mobile';
// import { IProduct } from '../../utils/type';
import { useGoTo } from '../../../../hooks';
import { ROUTE_KEY } from '../../../../routes/menu';
import style from './index.module.less';

interface IProps {
  data: any;
}
/**
 * 商品Card
 */
const ProductCard = ({ data }: IProps) => {
  const { go } = useGoTo();
  const goToOrgInfo = (id: string) => {
    go(ROUTE_KEY.ORG_INFO, { id });
  };

  const goToProductInfo = (id: string) => {
    go(ROUTE_KEY.PRODUCT_INFO, { id });
  };

  return (
    <div className={style.container}>
      <Image
        src={data.coverUrl}
        className={style.img}
        onClick={() => goToProductInfo(data.id || '')}
      />
      <div className={style.info}>
        <div
          className={style.name}
          onClick={() => goToProductInfo(data.id || '')}
        >
          {data.name}
        </div>
        <div className={style.org}>
          <span
            className={style.orgName}
            onClick={() => goToOrgInfo(data.org.id)}
          >
            {data.org.name}
          </span>
          <span className={style.distance}>
            {data.org.distance >= 5000
              ? '>5km'
              : data.org.distance < 1000
                ? `${Math.ceil(data.org.distance)}m`
                : `${Math.ceil(data.org.distance.toString().charAt(0))}km`}
          </span>
        </div>

        <div className={style.price}>
          <span className={style.preferentialPrice}>
            ￥
            {data.preferentialPrice}
          </span>
          <span className={style.originalPrice}>
            ￥
            {data.originalPrice}
          </span>
        </div>
      </div>
    </div>
  );
};

export default memo(ProductCard);
